<template>
<van-nav-bar title="登入" class="page-bar">
    <template #left>
    <van-icon name="cross" size="18" @click="back()"/>
  </template>
</van-nav-bar>
<van-form @submit="onSubmit">
    <van-field name="userName" placeholder="请输入用户名" left-icon="manager" v-model="userName" :rules="[{ required: true, message: '请填写用户名' }]"/>
    <van-field type="password" name="userPwd" placeholder="请输入密码" left-icon="lock" v-model="userPwd" :rules="[{ required: true, message: '请填写密码' }, { pattern: /^\d{6}$/, message: '密码格式错误' }]"/>
    <div style="margin: 16px;">
    <van-button block round type="primary" native-type="submit">
      提交
    </van-button>
    </div>
</van-form>
    </template>

<script setup>
import { showLoadingToast } from 'vant';
import router from "../../router/router"
import { useUsersStore1 } from "../../store/login"
import { storeToRefs } from "pinia"

let store = useUsersStore1()
let { userName, userPwd } = storeToRefs(store)
//验证通过后，进行下一步
function onSubmit() {
    showLoadingToast({
        message: '登入中...',
        forbidClick: true,
    });
    store.logn()
}
//点击x后退
function back() {
    router.back()
}
</script>

<style scoped>
.van-nav-bar {
    background-color: #3296fa;
}

.van-nav-bar .van-icon {
    color: #fff;
}
</style>